<template>
  <view class="top-page" :style="`--amplified_base:${currentAmplifiedBase}`">
    <view class="status_bar"></view>
    <slot />
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    amplifiedBase: {
      style: Number,
      default: 0,
    },
  },
  computed: {
    currentAmplifiedBase() {
      return this.amplifiedBase ? this.amplifiedBase : uni.getStorageSync("amplifiedBase") || 1;
    },
  },
  watch: {
    amplifiedBase: (val) => {
      uni.setStorageSync("amplifiedBase", val);
    },
  },
  methods: {},
};
</script>

<style lang="scss">
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  background-color: transparent;
}

.top-page {
  width: 100vw;
  background: #ededed;

  .top-page .status_bar {
    height: 0;
  }
}
</style>
